<template>
  <div class="game-settings">
    <h2>围棋游戏设置</h2>
    <div class="setting-group">
      <label>棋盘大小:</label>
      <div class="board-size-options">
        <button 
          v-for="size in boardSizes" 
          :key="size" 
          :class="{ active: selectedBoardSize === size }"
          @click="selectBoardSize(size)"
        >
          {{ size }}路
        </button>
      </div>
    </div>
    
    <div class="setting-group">
      <label>游戏模式:</label>
      <select v-model="gameMode">
        <option value="local">本地对弈</option>
        <option value="ai" disabled>人机对弈 (即将推出)</option>
      </select>
    </div>
    
    <div class="setting-group">
      <label>规则设置:</label>
      <div class="checkbox-group">
        <label>
          <input type="checkbox" v-model="komi"> 贴目 (6.5目)
        </label>
      </div>
    </div>
    
    <button class="start-game" @click="startGame">开始游戏</button>
  </div>
</template>

<script>
export default {
  name: 'GameSettings',
  data() {
    return {
      boardSizes: [9, 13, 19],
      selectedBoardSize: 19,
      gameMode: 'local',
      komi: true
    }
  },
  methods: {
    selectBoardSize(size) {
      this.selectedBoardSize = size;
    },
    startGame() {
      this.$emit('start-game', {
        boardSize: this.selectedBoardSize,
        gameMode: this.gameMode,
        komi: this.komi
      });
    }
  }
}
</script>

<style scoped>
.game-settings {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.setting-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #555;
}

.board-size-options {
  display: flex;
  gap: 10px;
}

.board-size-options button {
  flex: 1;
  padding: 8px 0;
  background-color: #e0e0e0;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.board-size-options button.active {
  background-color: #4CAF50;
  color: white;
  border-color: #4CAF50;
}

select {
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: white;
}

.checkbox-group {
  margin-top: 5px;
}

.checkbox-group label {
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 5px;
}

.start-game {
  display: block;
  width: 100%;
  padding: 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 20px;
}

.start-game:hover {
  background-color: #45a049;
}
</style>